<template>
  <div class="we_component we_card_editor">
    <div class="edit_item">背景颜色：<el-color-picker v-model="data.bgc"></el-color-picker></div>
    <div class="edit_item">获取不到个人地址信息时，地图位置显示以下图片</div>
    <div class="img_preview" v-if="data.img">
      <img :src="data.img" alt="">
      <i class="el-icon-close del" title="删除" @click="handleDelImg"></i>
    </div>
    <el-button v-else type="primary" @click="dialog=true">从素材库选择</el-button>
    <!-- 选择图片 -->
    <el-dialog ref="dialog" title="选择图片" :visible.sync="dialog">
      <dialog-image></dialog-image>
      <div slot="footer">
        <el-button type="primary" @click="handleSelectImage">确定</el-button>
        <el-button @click="dialog=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import dialogImage from '@/components/common/content/dialogImage'
  import {mapState} from 'vuex'
  export default {
    props: ['data'],
    components: {dialogImage},
    data () {
      return {
        dialog: false
      }
    },
    computed: {
      ...mapState({
        selected: state => state.sourceManage.selected
      })
    },
    methods: {
      handleSelectImage () {
        this.data.img = this.selected.url
        this.dialog = false
      },
      handleDelImg () {
        this.data.img = ''
      }
    }
  }
</script>
<style lang="scss">
  .we_card_editor{
    &{padding:15px;}
    .edit_item{margin-bottom:15px;}
    .img_preview{
      &{position:relative;width:100px;height:100px;cursor:pointer;}
      &:hover{outline:1px solid blue}
      img{width:100%;height:100%;}
      .del{position:absolute;top:3px;right:3px;color:#666}
    }
  }
</style>
